<template>
	<view class="content">
        <view class="section_lookindx">
            <view class="section_title">
				<view :class="currentItemId == index? 'active' : ''" v-for="(item,index) in title" @tap="bindindex(index)" :key='index' :data-id="index">{{item.name}}<text class="iconfont icon-shang1" v-if="index!=0"></text></view> 
			</view>
			<view class="section_content_li" v-for="(item,index) in lookinfo" :key="index" :data-id="index">
				<image mode="aspectFill"  @tap="shopDeil(item.id)" class="img_left" :src="item.logo?item.logo:'/static/images/icon_01.png'"></image>			
				<view class="content_li_middle"  @tap="shopDeil(item.id)">
					<text>{{item.company_name?item.company_name:'未知'}}</text>
					<view class="ads">距离我{{item.distanceText}}</view>
					<view class="middle_name">
						<image :src="item.user.avatar_url?item.user.avatar_url:'/static/images/icon_01.png'"></image>
						<text>{{item.user.nickname?item.user.nickname:'未知'}}</text>
					</view>
				</view>	
				<view class="content_li_right">
					<image @tap="mapTap(index)" src="../../../static/images/icon_02.png"></image>
					<button @tap="appointment(item.id)">预约上门</button>
				</view>
				<view class="clear"></view>
			</view>             
        </view>
		<toast></toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: [{ name: '综合' }, { name: '距离最近' }, { name: '好评最高' }],
			lookinfo: [],
			currentItemId: 0,
			iconB: true,
			now_page: 1,
			distance_sort: '',
			comment_score_sort: ''
		};
	},
	methods: {
		
		// 获取店铺列表
		get_shop_list: async function() {
			let p = await this.get_now_position();
			let data = {
				longitude: p.longitude,
				latitude: p.latitude,
				currentPage: this.now_page,
				distance_sort: this.distance_sort,
				comment_score_sort: this.comment_score_sort
			};
			let res = await this.$ajax.post({
				url: '/Shop/shopList',
				data
			});
			if (res.code == 200) {
				// this.$alert("succ")
				this.lookinfo = res.data;
			} else {
				this.$alert(res.msg);
			}
	 
		},
		// 获取当前位置
		get_now_position: async function() {
			return new Promise(function(resolve, reject) {
				uni.getLocation({
					success(res) {
						resolve(res);
					}
				});
			});
		},
		//筛选 切换
		bindindex(index) {
			this.currentItemId = index;
			switch (index) {
				case 0:
					this.distance_sort = 0;
					this.comment_score_sort = 0;
					break;
				case 1:
					this.distance_sort = 1;
					this.comment_score_sort = 0;
					break;
				case 2:
					this.distance_sort = 0;
					this.comment_score_sort = 1;
					break;
				default:
					break;
			}
			this.get_shop_list();
		},
		//查看详情
		shopDeil(id) {
			uni.navigateTo({
				url: '../shopDeil/shopDeil?id=' + id
			});
		},
		//导航
		mapTap(index) {
			let item = this.lookinfo[index];
			uni.openLocation({
				latitude: parseFloat(item.latitude),
				longitude: parseFloat(item.longitude),
				success: function() {
					console.log('success');
				}
			});
		},
		//预约
		appointment(id) {
			uni.navigateTo({
				url: '../appointment/appointment?id'+id
			});
		}
	},
	onLoad() {
		this.get_shop_list();
	},
	// 下拉刷新
	onPullDownRefresh(){
		console.log("下拉刷新")
		setTimeout(()=>{
			 uni.stopPullDownRefresh();
		},800)
	},
	// 上拉加载
	onReachBottom(){
		console.log("上拉加载")
	},
};
</script>

<style>
.section_lookindx {
	padding: 0 20upx;
	width: 100%;
	box-sizing: border-box;
}
.section_title {
	display: flex;
	text-align: center;
	width: 100%;
	border-bottom: 1px solid #eeeeee;
}
.section_title .active {
	color: #272727;
}
.section_title view {
	justify-content: center;
	color: #a4a8b4;
	display: flex;
	align-items: center;
	width: 33.33%;
	line-height: 85upx;
}
.section_content_li {
	border-bottom: 1px solid #eeeeee;
	padding: 30upx 0;
}
.img_left {
	height: 180upx;
	width: 277upx;
	display: inline-block;
	float: left;
	border-radius: 20upx;
}
.content_li_middle {
	display: inline-block;
	width: 260upx;
	padding: 0 30upx;
	float: left;
	box-sizing: border-box;
}
.content_li_middle text {
	display: inline-block;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
}
.content_li_middle .ads {
	color: #a4a8b4;
	font-size: 24upx;
	font-weight: normal;
}
.middle_name {
	display: flex;
	align-items: center;
	height: 70upx;
	line-height: 70upx;
	padding-top: 25upx;
}
.middle_name text {
	font-weight: normal;
	font-size: 24upx;
	padding-left: 15upx;
}
.middle_name image {
	height: 45upx;
	width: 45upx;
	border-radius: 50%;
	display: inline-block;
}
.content_li_right {
	width: 175upx;
	float: right;
	text-align: right;
}
.content_li_right image {
	height: 45upx;
	width: 45upx;
	margin: 35upx 20upx 35upx 0;
}
.content_li_right button {
	padding: 0;
	margin: 0;
	color: #fff;
	background: #fc4b65;
	height: 50upx;
	line-height: 50upx;
	font-size: 26upx;
	width: 160upx;
	border-radius: 50upx;
	text-align: center;
}
.content_li_right button:after {
	border: none;
}
</style>
